<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no,viewport-fit=cover">
	    <meta name="apple-mobile-web-app-capable" content="yes">
	    <meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
<!--		<link rel="stylesheet" href="css/style.css" />-->
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/report.css" />
		<script type="text/javascript" src="https://zeptojs.com/zepto.min.js" ></script>
		<script type="text/javascript" src="js/echarts.common.min.js" ></script>
		<script type="text/javascript" src="js/report.js" ></script>
	</head>
	<body>
		<!--昨日照片发布情况-->
		<div id="yesterdayPhoto" class="bff">
		  <div class="report-title"><strong>昨日照片发布情况</strong></div>
		  <div class="yesterdayPhoto-title">每天发布学生的照片能够让家长感受老师的用心，促进家校沟通！昨日有<strong class="">4</strong>个班级未发布照片，快提醒老师发布</div>
		  <div class="yesterday-content">
		  	<ul class="yesterdayPhoto-list ov">
			  	<li>中班1班</li>
			  	<li>中班2班</li>
			  	<li>中班3班</li>
			  	<li>小班1班</li>
			  	<li>中班1班</li>
			  	<li>中班2班</li>
			  	<li>中班3班</li>
			  	<li>小班1班</li>
			  	<li class="btn-more">查看更多班级</li>
			</ul>
			<div id="container" style="height:19.0rem;"></div>
		  </div>
		  
		  <div class="yesterdayPhoto-btn"><button type="button" class="mui-btn mui-btn-primary lh2">提醒老师发照片</button></div>
		</div>
	    
	   
       <script type="text/javascript">
            var dataDateArr=[];
			var dataNumArr=[];
			var dataCanyArr=[];
			var dataFull=[];
            var isblock="";
            dataList=[
              {
              	dateTime:'中班1班',
                dataNum:'15',
                dataCany:'8'
              },
              {
              	dateTime:'中班2班',
                dataNum:'120',
                dataCany:'10'
              },
              {
              	dateTime:'中班3班',
                dataNum:'15',
                dataCany:'3'
              },
              {
              	dateTime:'小班1班',
                dataNum:'30',
                dataCany:'20'
              },
              {
              	dateTime:'小小班2班',
                dataNum:'10',
                dataCany:'0'
              },
              {
              	dateTime:'小小班3班',
                dataNum:'20',
                dataCany:'10'
              },
              {
              	dateTime:'小小班4班',
                dataNum:'25',
                dataCany:'15'
              },
              {
              	dateTime:'小小班3班',
                dataNum:'118',
                dataCany:'13'
              },
              {
              	dateTime:'小小班2班',
                dataNum:'16',
                dataCany:'16'
              },
              {
              	dateTime:'小小班1班',
                dataNum:'100',
                dataCany:'15'
              }
            ];
            var color = ['#82bb2a','#cc3c1a'];
            dataList.forEach((val)=>{
            	dataDateArr.push(val.dateTime);
            	dataNumArr.push({
            		value: val.dataNum>=100?100:val.dataNum,
            		itemStyle: {
            			color: color[val.dataNum >= 100 ? 0 : 1]
            		}
            	});
            	dataCanyArr.push(val.dataCany)
            	dataFull.push('100')
            })
//          console.log(dataDateArr)
//          console.log(dataNumArr)
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
//			var totalNum=32;
//			var canyNum=0;
			var app = {};
			option = null;
			option = {
			    legend: {
			    	type:'scroll',
			       // data:['每日活跃情况'],
			        left:'center',
			        bottom: 0,
			        textStyle:{
			        	color:'#000'
			        }
			    },
			    dataZoom: [{
		            type: 'inside',
		            zoomLock: true,
		            startValue:this.dataDateArr.length-6,
		            endValue:this.dataDateArr.length-1
		        }],
			    grid: {
	                left:0,
	                right: '3%',
	                bottom: '3%',
	                top:'10%',
	                containLabel: true
	            },
			    xAxis: {
				    type: 'category',
				    data: dataDateArr,
				    interval:0,
				    triggerEvent: true,
				    axisLine:{
				    	lineStyle:{
				    		color: '#ccc',
				    		nameRotate:45
				    	}
				    },
				    axisTick:{
				    	alignWithLabel:true
				    },
				    axisLabel:{
				    	interval:0,
				    	rotate:40,
				    	color:'#000'
				    },
				    splitLine: {
			            show: false,
			            lineStyle:{
			                 color: ['#ccc'],
			                 width: 1,
			                type: 'dashed'
			            }
			        }
			    },
				yAxis: {
				    type: 'value',
				    axisTick: {
			            show: false
			        },
				    axisLine:{
				    	lineStyle:{
				    		color: '#ccc'
				    	}
				    },
				    axisLabel:{
				    	formatter:function(params){return params ? params + "%" : ''}
//				    	color:'#000'
				    },
				    splitLine: {
			            show: true,
			            lineStyle:{
			                 color: ['#ccc'],
			                 width: 1,
			                type: 'dashed'
			            }
			       }
				},
				series: [
				   {
					    data: dataNumArr,
					    type: 'bar',
					    name:'',
					    barWidth:30,
					    z:2
				   },
				   {
			            name: '',
			            type: 'bar',
			            xAxisIndex: 0,
			            barWidth: 30,
			            barGap: '-100%',
			             itemStyle: {
			                normal: {
			                    color: '#ddd'
			                }
			            },
			            z:0,
			            data:dataFull,
			            // markArea: areaStyle
			        }
				]
			};
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}
				
	   </script>
	   <script>
		   
	   </script>
	</body>
</html>
